<template>
  <!-- 消防健康评估 -->
  <div class="content-item fire-health-assessment">
    <div class="content-item-title">
      消防健康评估
      <span style="margin-left:10px;color:#999;font-size:14px;">监管{{dataList.length}}家单位</span>
    </div>
    <div class="content-item-wrap" style="padding-bottom:0;">
      <div class="canvas-bg" style="height:162px;">
        <div class="card-wrap">
          <el-carousel
            height="162px"
            arrow="hover"
            :class="{'one-carousel-item': orgList && orgList.length == 1}"
            :autoplay="false"
          >
            <el-carousel-item v-for="item in orgList" :key="item.pageNum">
              <div class="card-page-wrap" :class="{ 'jc-start':orgList.length<5 }">
                <el-popover
                  v-for="(obj, i) in item.list"
                  :key="i"
                  placement="bottom"
                  width="400"
                  trigger="hover"
                  @show="onPopShow(obj)"
                >
                  <div
                    slot="reference"
                    class="card-item"
                    :class="obj.levelClass"
                    v-bind:data-orgId="obj.organizationId"
                    @click="getListFireHealth"
                  >
                    <div class="level-icon"></div>
                    <p class="name">{{obj.shortName}}</p>
                    <p class="value">{{obj.safetyScore}}</p>
                    <div class="level-name">{{obj.levelTitle}}</div>
                  </div>
                  <div>
                    <div class="list-item--score" v-for="(score, j) in obj.indicatorArr" :key="j">
                      <span class="list-item-title">{{ score.name }}</span>
                      <template>
                        <span v-if="score.value == 0" class="list-item-value color-3">✔</span>
                        <span v-else class="list-item-value color-1">
                          {{
                          "-" + score.value
                          }}
                        </span>
                      </template>
                    </div>
                  </div>
                </el-popover>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getScoreItemDetail } from '@/api/home'
import { getOrgAllList } from '@/api/home'

export default {
  name: 'FireHealthAssessment',
  props: {
    jumpFun: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      showSingle: false,
      selectOrgId: '',
      orgList: [],
      dataList: [],
    }
  },
  created() {
    this.scoreMap = {}
    let that = this
    that.getListData()
  },
  methods: {
    onPopShow(item) {
      if (this.scoreMap[item.organizationId]) {
        item.indicatorArr = this.scoreMap[item.organizationId]
        return
      }
      getScoreItemDetail({
        orgId: item.organizationId,
      }).then((res) => {
        if (res.status === 200) {
          this.initSafeAssessEchart(item, res.data)
        }
      })
    },
    initSafeAssessEchart(item, data) {
      let arr = []
      for (let key in data) {
        if (['1', '2', '3', '4', '5', '6'].indexOf(key) > -1) {
          let _obj = data[key]
          let _score =
            (_obj.value ? parseFloat(_obj.value) : 0) > 100
              ? 0
              : 100 - (_obj.value ? parseFloat(_obj.value) : 0)
          arr.push({
            name: _obj.groupName,
            max: _obj.maxScore,
            min: 0,
            value: _obj.value,
            groupId: _obj.groupId,
            groupIco: _obj.groupIco,
          })
        }
      }
      this.$set(item, 'indicatorArr', arr)
      this.scoreMap[item.organizationId] = arr
    },
    getListData() {
      let that = this
      let params = {
        organizationIds: that.$store.state.userinfo.organizationIds,
        queryType: 0,
        order: 'asc',
        sortType: 'safetyScore',
      }
      getOrgAllList(params).then((res) => {
        if (res && res.status == 200) {
          res.data.forEach((n) => {
            n.indicatorArr = []
          })
          this.dataList = res.data
          that.orgList = that.resetData(res.data)
        }
      })
    },
    resetData: function (data) {
      var orgList = data
      var newOrgList = []
      var newArr = []
      var level = {}
      var j = 0

      for (let i = 0, len = orgList.length; i < len; i++) {
        level = this.mapLevel(Number(orgList[i].safetyScore))
        newArr.push($.extend(orgList[i], level))
        if ((i + 1) % 5 === 0) {
          newOrgList.push({ list: newArr, pageNum: j++ })
          newArr = []
        }
      }
      if (newArr.length != 0) {
        newOrgList.push({ list: newArr, pageNum: j++ })
      }
      return newOrgList
    },
    mapLevel: function (data) {
      var levelObj = {
        levelTitle: '',
        levelClass: '',
      }
      if (data >= 0 && data < 80) {
        levelObj.levelTitle = '告急'
        levelObj.levelClass = 'three-level'
      } else if (data >= 80 && data < 90) {
        levelObj.levelTitle = '危险'
        levelObj.levelClass = 'two-level'
      } else {
        levelObj.levelTitle = '安全'
        levelObj.levelClass = 'one-level'
      }

      return levelObj
    },
    getListFireHealth(e) {
      let that = this
      let _orgId = $(e.currentTarget).attr('data-orgId')
      let _orgName = $(e.currentTarget).find('.name').text()

      that.jumpFun(_orgId, _orgName)
    },
    // 更新/刷新模块
    refreshModel(data) {
      let that = this
      // if(Object.keys(data).length > 0) {
      //     that.orgList = that.resetData(data)
      // } else {
      // }
      that.getListData()
    },
  },
}
</script>

<style lang="scss">
.list-item--score {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid rgba(179, 187, 216, 0.2);
  &:last-child {
    border-bottom: none;
  }
}
.card-page-wrap {
  justify-content: space-between;
  &.jc-start{
    justify-content: flex-start;
    > span{
      margin-right: 40px;
    }
  }
}
.fire-health-assessment .content-item-wrap {
  padding-bottom: 0;
}
.fire-health-assessment .canvas-bg {
  position: relative;
  width: 1200px;
  height: 170px;
  overflow: hidden;
}

.fire-health-assessment .canvas-bg .card-wrap {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1200px;
}

.fire-health-assessment .card-wrap .card-page-wrap {
  display: flex;
  width: 1200px;
  height: 160px;
}

.fire-health-assessment .card-wrap .card-item {
  float: left;
  margin-right: 75px;
  padding: 10px;
  width: 180px;
  height: 160px;
  text-align: center;
  border: 1px solid rgba(189, 189, 189, 0.6);
  box-sizing: border-box;
  cursor: pointer;
}
.fire-health-assessment .card-wrap .card-item:last-child {
  margin-right: 0;
}
.fire-health-assessment .card-wrap .card-item:hover {
  box-shadow: 0 0 12px #bdbdbd;
}
.fire-health-assessment .card-item .level-icon {
  margin-top: 3px;
  width: 100%;
  height: 25px;
  background: url('../../../assets/images/home/fire-level.png') no-repeat;
  background-size: 70px;
}

.fire-health-assessment .card-item .name {
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  color: #666;
}

.fire-health-assessment .card-item .value {
  height: 40px;
  line-height: 36px;
  font-size: 36px;
}

.fire-health-assessment .value span {
  font-size: 14px;
}

.fire-health-assessment .card-item .level-name {
  margin: 0 auto;
  border-radius: 25px;
  padding: 5px;
  width: 60px;
  color: #fff;
}
/* 等级图标 */
.fire-health-assessment .one-level .level-icon {
  background-position: center -59px;
}
.fire-health-assessment .two-level .level-icon {
  background-position: center center;
}
.fire-health-assessment .three-level .level-icon {
  background-position: center 1px;
}
/* 单位名称 */
.fire-health-assessment .name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 等级字体色 */
.fire-health-assessment .one-level .value {
  color: #47cfad;
}
.fire-health-assessment .two-level .value {
  color: #f1b83e;
}
.fire-health-assessment .three-level .value {
  color: #e44d60;
}
/* 等级背景色 */
.fire-health-assessment .one-level .level-name {
  background-color: #47cfad;
}
.fire-health-assessment .two-level .level-name {
  background-color: #f1b83e;
}
.fire-health-assessment .three-level .level-name {
  background-color: #e44d60;
}

/* 修改elementui跑马灯切换样式 */
.fire-health-assessment .el-carousel__indicators {
  display: none;
}
.fire-health-assessment .el-carousel__indicator .el-carousel__button {
  width: 40px;
  height: 6px;
  background-color: #e8e3e3;
}
.fire-health-assessment .el-carousel__indicator.is-active .el-carousel__button {
  background-color: #2876d1;
}
</style>
